<template>
	<el-drawer :title="titleMap[mode]" v-model="visible" :size="1000" destroy-on-close @closed="$emit('closed')">
		<el-container v-loading="loading">
			<el-main style="padding:0 20px 20px 20px">
				<permission-dialog ref="permissionDialog"></permission-dialog>
			</el-main>
			<el-footer>
				<el-button type="primary" :loading="isSaveing" @click="submit">保存</el-button>
				<el-button @click="visible=false">取消</el-button>
			</el-footer>
		</el-container>

		<el-drawer title="过滤项配置" v-model="setFiltersVisible" :size="500" destroy-on-close>
			<el-main style="padding:0 20px 20px 20px">
				<sc-form-table v-model="selectionFilters" :addTemplate="filtersAddTemplate" drag-sort placeholder="暂无数据">
					<el-table-column prop="text" label="名称">
						<template #default="scope">
							<el-input v-model="scope.row.text" placeholder="请输入名称"></el-input>
						</template>
					</el-table-column>
					<el-table-column prop="value" label="值" width="150">
						<template #default="scope">
							<el-input v-model="scope.row.value" placeholder="请输入值"></el-input>
						</template>
					</el-table-column>
				</sc-form-table>
			</el-main>
		</el-drawer>


	</el-drawer>
</template>

<script>

	var _this;

	import permissionDialog from './permission'

	export default {
		emits: ['success', 'closed'],
		components: {
			permissionDialog
		},
		data() {
			return {
				role_id:null,
				loading: false,
				mode: "add",
				titleMap: {
					add: '权限设置',
					edit: '权限设置'
				},
				form: {},
				rules: {
					name: [
						{required: true, message: '请输入表格名称', trigger: 'blur'}
					],
					code: [
						{required: true, message: '请输入唯一标识', trigger: 'blur'}
					]
				},
				addTemplate: {
					label: '',
					prop: '',
					width: '100',
					hide: false,
					sortable: false,
					fixed: false,
					filters: []
				},
				visible: false,
				isSaveing: false,
				selectionFilters: [],
				filtersAddTemplate: {
					text: '',
					value: ''
				},
				setFiltersVisible: false
			}
		},
		mounted() {
			_this = this;
		},
		methods: {
			//显示
			open(data){

				this.role_id = data.id;

				if(this.role_id == 1){
					this.$alert("默认超级管理员角色不能编辑", "提示", {type: 'error'})
					return
				}

				this.visible = true;
				this.$nextTick(() => {
					this.$refs.permissionDialog.open(_this.role_id);
				})
				return this;
			},
			//表单提交方法
			submit(){
				this.$refs.permissionDialog.validate(async (data) => {
					if (data) {
						_this.isSaveing = true;
						var res = await _this.$API.system.role.update.post({role_id:_this.role_id,data:data});
						_this.isSaveing = false;
						if(res.code == 0){
							_this.$emit('success', data, _this.mode)
							_this.visible = false;
							_this.$message.success("操作成功")
						}else{
							_this.$alert(res.message, "提示", {type: 'error'})
						}
					}
				})
			},
			//表单注入数据
			setData(data){
				this.loading = true
				const params = {
					id: data.id
				}
				setTimeout(async ()=>{
					// var res = await this.$API.system.table.info.get(params)
					this.loading = false
					// this.form = res.data
				},400)

			},
			//设置过滤项
			setFilters(filters){
				this.selectionFilters = filters
				this.setFiltersVisible = true
			}
		}
	}
</script>

<style>
</style>
